import QtQuick 2.0
import QtQuick.Layouts 1.1
import com.yihu.xchat.enum 1.0;
import com.yihu.xchat.model 1.0;

import "../../js/widget/GroupMembers.js" as Js

Rectangle{
    id: membersRect
    color: "#EEEEEE"

    // 私有属性
    Item {
        id: props
    }

    // 方法，公开
    property var setMembersModel: Js.setMembersModel

    ColumnLayout{
        anchors.fill: parent

        // 在线人数/总人数统计
        Text {
            id: memberStats

            text: ""
        }

        ListView {
            id: memberListView

            Layout.fillWidth: true
            Layout.fillHeight: true

            clip: true
            highlight: Rectangle {
                color: "lightgray"
                focus: true
            }

            // 委托
            delegate: Component{
                Rectangle{
                    width: memberListView.width
                    height: 36

                    color: "transparent"

                    Rectangle{
                        id: userPhoto

                        width: 34
                        height: 24

                        color: "transparent"

                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
                        anchors.left: parent.left
                        anchors.leftMargin: 5

                        Image {
                            source: photo

                            anchors.fill: parent
                        }
                    }

                    Text {
                        anchors.right: parent.right
                        anchors.left: userPhoto.right
                        anchors.verticalCenter: userPhoto.verticalCenter

                        elide: Text.ElideRight

                        text: nickName
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            console.debug("member clicked");
                            memberListView.currentIndex = index;
                            memberListView.focus = true
                        }

                        onDoubleClicked: {
                            console.debug("Open personal chatting window...");
                        }
                    }
                }
            }
        }
    }
}
